<template>
	<view class="status_page">
		<navBar title="筛选" goBackUrl="/pages/homePage/homePage" @goBack="goBack"></navBar>
		<view class="date-box">
			<view class="label">施工日期</view>
			<date-scope-picker ref="pickerDate" v-model="selectDate"></date-scope-picker>
		</view>
		
		<view class="line-box" @click="selectSection">
			<view class="">区间/站点</view>
			<view class="value">
				<view class="name">{{siteVal == '' ? '请选择区间/站点' : siteVal}}</view>
				<u-icon name="close-circle" color="#2979ff" size="18" v-if="siteVal" @click.stop="clearSite"></u-icon>
				
				<u-icon name="arrow-right" color="#2979ff" size="18"></u-icon>
			</view>
		</view>
		<u-calendar  :show="showCalendar" mode="range"  @confirm="confirm" @close="showCalendar=false" :showSubtitle="false"></u-calendar>

		<u-datetime-picker @cancel="isShowStart=false" @confirm="productionDateConfirm($event, 'start')"
			:show="isShowStart" v-model="startDate" mode="date"></u-datetime-picker>
		<u-datetime-picker @cancel="isShowEnd=false" @confirm="productionDateConfirm($event, 'end')"
			:show="isShowEnd" v-model="endDate" mode="date"></u-datetime-picker>
		<view class="bottom-box">
			<view class="label" @click="test">施工工法</view>
			<view class="group_box">
				<view class="btn" v-for="(item,index) in buttonList" :key="index">
					<view class="value" @click="selectedTab = index" :class="selectedTab == index? 'selected-item': ''">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="btn_box">
			<view class="btn">
				<u-button type="primary" :plain="true" text="重置" @click="reset"></u-button>
				<u-button type="primary" text="确定" @click="fnNavBack"></u-button>
			</view>
		</view>
		<view class="footer-button">
			<view class="button-placeholder"></view>
			<view class="button-group">
				<button  @click="reset"  class="button-warn">重置</button>
				<button  @click="fnNavBack"  throttleTime="2000" class="button-primary">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import dateScopePicker from '../components/dateScopePicker.vue'
	
	export default {
		data() {
			return {
				buttonList: [],
				selectedTab: 0,
				isShowStart: false,
				isShowEnd: false,
				showCalendar: false,
				selectedTime: '',
				form: {
					startDate: '',
					endDate: ''
				},
				startDate: Number(new Date()),
				endDate: Number(new Date()),
				siteVal: '',
				// 选择的日期范围[...,...]
				selectDate:[],
				// 页面传输过来的项目id
				pmId:-1,
				formData:null,
				// 传过来的筛选数据, 用于已筛选绑定已选择的数据
				filterData:{}
			}
		},
		
		components:{
			dateScopePicker
		},
		onLoad(option){
			this.buttonList = this.$store.getters.dictMap['construction_method']
			if(option.pmId){
				this.pmId = option.pmId;
			};
			// 传过来的筛选数据, 用于已筛选绑定已选择的数据
			if(option.filterData !== '{}'){
				this.filterData = JSON.parse(option.filterData);
				// 日期范围
				this.selectDate = this.filterData.constructionDates;
				// this.$refs.pickerDate.dateReturnShow(temp.constructionDates);
				// 工法
				// debugger
				this.selectedTab = this.buttonList.findIndex(it => it.groupCode === this.filterData.constructionMethod)
			}
			if(option.formData !== '{}' && option.formData !== 'null'){
				this.formData = JSON.parse(option.formData);
				// 站点\区间文字
				this.siteVal = this.formData.siteName;
			}
			
		},
		mounted() {
			if(this.selectDate.length > 1){
				this.$refs.pickerDate.dateReturnShow(this.filterData.constructionDates);
			}
		},
		methods: {
			test(){
				console.log(this.selectDate);
			},
			// 选择施工日期
			productionDateConfirm(val, str) {
				console.log(val,str,  'val')
				if(str == 'start') {	
					this.form.startDate = this.timestampToTime(val.value)
					this.isShowStart = false
				}else {
					this.form.endDate = this.timestampToTime(val.value)
					this.isShowEnd = false
				}
			},
			confirm(val) {
				this.selectedTime = this.timestampToTime(val[0]) + '--' + this.timestampToTime(val[val.length - 1])
				this.showCalendar = false
				console.log(this.selectedTime)
				
			},
			// 时间戳转年月日
			timestampToTime(timestamp) {
				var date = new Date(timestamp);
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				return Y + M + D;
			},
			clearSite() {
				this.siteVal = ''
			},
			goBack(url){
				uni.navigateBack({})
				// uni.switchTab({
				// 	url: url
				// })
			},
			reset(){
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.resetData();
				uni.navigateBack();
			},
			fnNavBack() {
				// if(!this.formData) return uni.showToast({
				// 	title:'请选择站点或区间',
				// 	icon:'none'
				// })
				var pages = getCurrentPages();
				var prevPage = pages[pages.length - 2]; //上一个页面
				prevPage.$vm.returnData({
					// 请求要用到的数据
					param:{
						// 站点或区间
						lineSiteSectionType:this.formData && this.formData.projectIds[1] || undefined,
						// 点或区间id
						lineSiteSectionId:this.formData && this.formData.projectIds[2] || undefined,
						// 工法
						constructionMethod:this.buttonList[this.selectedTab].groupCode,
						// 施工日期
						constructionDates:this.selectDate
					},
					formData:this.formData //选择的区间或者站点全部数据
				})
				
				uni.navigateBack();
			},
			// 选择区间/站点
			selectSection() {
				this.$$off(this.$config.ENV_SELECT_PROJECT)
				this.$$on(this.$config.ENV_SELECT_SITE, res => {
					let obj = {
						bpId: res[0].id,
						bizProjectName: res[0].name,
						sectionName: res[1].name,
						siteId: res[2].id,
						siteName: res[2].name,
						projectCascade: `${res[0].name}/${res[1].name}/${res[2].name}`,
						projectIds: [res[0].id, res[1].id, res[2].id]
					}
					this.formData = Object.assign({}, this.formData, obj)
					console.log(this.formData, 'projectScreen站点数据');
					this.siteVal = this.formData.siteName; //绑定到页面上
					
				});
				uni.navigateTo({
					url: `/subpackage-overhaul/pages/comprehensiveOverhaul/progressFilling/components/selectSectionAndSite?pmId=${this.pmId}&projectType=zhdx`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.status_page {
		min-height: 100vh;
		width: 100%;
		background-color: #f5f5f9;
		/* #ifdef MP-WEIXIN */
			box-sizing: border-box;
			padding-top: 200rpx;
		/* #endif */
		.group_box {
			display: flex;
			align-items: center;
			// justify-content: space-around;
			flex-wrap: wrap;
			.btn {
				width: 200rpx;
				// padding: 0 30rpx;
				height: 80rpx;
				background-color: #f6f8fc;
				text-align: center;
				margin: 0 auto;
				margin: 10rpx;
				border-radius: 8rpx;
				.value {
					display: block;
					line-height: 80rpx;
				}
			}
		}
		// .group_box::after {
		// 	content: '';
		// 	flex: auto;
		// }
		.selected-item {
			// background-color: #f59a23;
			color: #2F80ED;
			border: 1px solid #2F80ED;
		}
	}
	.btn_box {
		height: 100rpx;
		.btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}
	.date-box {
		margin: 20rpx 0;
		// display: flex;
		// align-items: center;
		// justify-content: space-between;
		padding: 20rpx 40rpx;
		background-color: #fff;
		.label {
			// font-size: 30rpx;
		}
		.date-item {
			width: 240rpx;
			height: 60rpx;
			background-color: #f2f2f2;
			border: 1px solid #f2f2f2;
			border-radius: 10rpx;
			text-align: center;
			line-height: 50rpx;
		}
	}
	.line-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		margin: 20rpx 0;
		padding: 18rpx 40rpx;
		.value {
			display: flex;
			align-items: center;
			.name {
				margin-right: 40rpx;
			}
		}
		
	}
	.bottom-box {
		background-color: #fff;
		// margin: 20rpx 0;
		padding: 16rpx 40rpx;
		.label {
			
			// font-size: 30rpx;
			margin-bottom:30rpx;
		}
	}
</style>